Parent Component--

import React from "react";
import {View,SafeAreaView,Text,StyleSheet} from 'react-native';
import TestComponent from "./Components/TestComponent";

const Test = () => {
    return (
            <View>
                <Text>Here are some boxes of different colours</Text>
                <TestComponent 
                    color='#2aa198'
                    name='Cyan'
                />
                <TestComponent 
                    color='#268bd2'
                    name='Blue'
                />
                <TestComponent 
                    color='#d33682'
                    name='Magenta'
                />
                <TestComponent 
                    color='#cb4b16'
                    name='Orange'
                />
            </View>
    );
};

const styles = StyleSheet.create({
        
});

export default Test;

Child Component--enter code here

import React from "react";
import {View,Text,StyleSheet} from 'react-native';

const TestComponent = ({color,name}) => {
    const colour = {
        backgroundColor:color,
    };

    return (
        <View style={colour}>
            <Text>{name}{colour}</Text>
        </View>
    )
};

const styles = StyleSheet.create({
    mH:{
        marginHorizontal:10
    },
    mV:{
        marginVertical:5
    },
    height:{
        height:30
    }
    
});

export default TestComponent;

When I try to use color prop as object in view in child property I'm getting error as "Objects are not valid as React child(found Object with keys {backgroundColor} and I also tried using colour.backgroundColor as well and still it is not working and I'm getting same error